<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../jquery-3.3.1.min.js"></script>
    <style type="text/css">
        #imglist{
            width: 98%;
            padding: 10px;
            border: 3px solid #0a0;
        }
        #imglist img{
            width: 150px;
            height: 250px;
        }
        #imglist img.selected{
            border: 5px solid #f00;
            width: 140px;
            height: 240px;
        }
        .item{
            width: 600px;
            line-height: 40px;
            border-bottom: 1px solid #000;
            padding: 0 30px;
            list-style: none;
        }
        .changeColor{
            background-color: #000;
            color:#fff;
        }
    </style>
</head>
<body>
    <div id="imglist">
        <img src="../imgs/1.jpg" title="pic1" data-img="1">
        <img src="../imgs/2.jpg" title="pic2" data-img="2">
        <img src="../imgs/3.jpg" title="pic3" data-img="3">
        <img src="../imgs/4.jpg" title="pic4" data-img="4">
        <img src="../imgs/5.jpg" title="pic5" data-img="5">
    </div>

    <hr>
    <ul id="newslist">
        <li class="item">日本政府称新冠肺炎病例或随时大幅增加 宣布新疫情对策</li>
        <li class="item">日本政府称新冠肺炎病例或随时大幅增加 宣布新疫情对策</li>
        <li class="item">日本政府称新冠肺炎病例或随时大幅增加 宣布新疫情对策</li>
        <li class="item">日本政府称新冠肺炎病例或随时大幅增加 宣布新疫情对策</li>
        <li class="item">日本政府称新冠肺炎病例或随时大幅增加 宣布新疫情对策</li>
        <li class="item">日本政府称新冠肺炎病例或随时大幅增加 宣布新疫情对策</li>
    </ul>
    <button>按钮</button>
    <script>
        $(function(){
            $('button').click(function(){
                //读取
                console.log($('#imglist img.selected').attr('title'));
                console.log($('#imglist img.selected').prop('title'));

                // 写入
                $('#imglist img.selected').attr('src','../imgs/2.jpg');

                // 移除
                $('#imglist img.selected').removeAttr('class');
            })
            // 选中效果, 只允许选一张
            $('#imglist img').click(function(){
                $(this).addClass('selected')
                .siblings('img').removeClass('selected');
            })
            // 划过变色
            $('#newslist li').hover(function(){
                $(this).toggleClass('changeColor')
            })
        })
    </script>
</body>
</html>